<template>
  <div id="login">
    <div class="cover" />
    <el-container>
      <el-header />
      <el-main>
        <el-row class="form-row">
          <el-col :xs="2" :sm="9"><div class="form-left"></div></el-col>
          <el-col :xs="20" :sm="6">
            <div class="login-div">
              <form action="#" method="post">
                <el-input placeholder="用户名" 
                          v-model="loginUser.userId" 
                          class="login-input" 
                          v-focus
                />
                <el-input show-password 
                          placeholder="密码" 
                          v-model="loginUser.password" 
                          class="login-input" 
                          @keyup.enter.native="login"
                />
                <span class="btn-span">
                  <el-button type="primary" class="login-btn" @click="login" >登录</el-button> 
                </span>
                <span class="btn-span">
                  <el-button type="primary" class="login-btn" @click="reset">重置</el-button>
                </span>
              </form>
            </div>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import {NO_ERROR} from '../../constant.js'
import {tidyFormParam} from '../../util.js'

export default {
  name: 'Login',
  data () {
    return {
      loginUser: {
        userId: '',
        password: ''
      }      
    }
  },
  methods: {       
    login () {
      let param = {}
      param.userId= this.loginUser.userId
      param.password = this.$md5(this.loginUser.password).toUpperCase()
      param = tidyFormParam(param)

      this.$axios.post('/login', param)
    	.then(res => {
        if (res.data && res.data.code === NO_ERROR) {
          let loginUser = res.data.data
          localStorage.setItem('loginUser', JSON.stringify(loginUser))
          this.$router.push('/frame')
        } else {
          this.$alert(res.data.data, '提示')
        }
    	})
    	.catch(console.log)
    },
    reset () {
      this.loginUser.userId = ''
      this.loginUser.password = ''
    }
  },
}
</script>

<style lang="stylus" scoped>
#login 
  height 100%
  background-color #2A61A4
  background-image url('../../assets/images/bg.jpg') 
  background-repeat no-repeat
  background-position  50% 50%
  .cover
    position absolute
    left 0
    top 0
    right 0
    bottom 0
    opacity .4
    z-index 0
    background-color #999
    width 100%
    height 100%
  .form-left
    height 1px
  .login-div
    border-radius 10px
    border 1px solid #333
    box-shadow 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
    padding 30px 20px  
    .login-input
      margin 10px 0
      &:nth-of-type(1)
        margin-top 0
    .btn-span
      width 50%
      display inline-block      
      box-sizing border-box
      &:nth-of-type(1)
        padding-right 5px
      &:nth-last-of-type(1)
        padding-left 5px
      .login-btn
          width 100%       
</style>
